<template>
	<view>
		<u-sticky bgColor="#a3d8f5">
			<view class="mainpadding" :style="{paddingTop:menutop+'rpx'}">
				<view class="flexleft">
					<image src="@/static/image/system/hsz.png" class="hszclass" mode=""></image>
					<view class="xiaobai fonweight" style="font-size: 35rpx;">红十字基金会“孤寡老人大病救助基金”</view>
				</view>
				<view class="margin_top flexbetween">
					<u-icon name="arrow-left" color="#fff" size="24" @click="backpage()"></u-icon>
					<view class="xiaobai fonweight sanshier" style="font-size: 32rpx;">公益人员申请表</view>
					<image src="@/static/image/system/list.png" mode="" class="topliclass" @click="toplistfn"></image>
				</view>
			</view>
		</u-sticky>
		<view class="ffffff mainpadding">
			<view class="ershiba xiaohei fonweight">个人信息
				<text class="ershiba xiaohong fonweight">*</text>
			</view>
			<view class="margin_top xiahuaxian flexleft">
				<view class="ershiba xiaohei margin_right2">姓名</view>
				<input placeholder="请输入" type="text" v-model="name" />
			</view>
			<view class="margin_top xiahuaxian flexleft">
				<view class="ershiba xiaohei margin_right2">性别</view>
				<u-radio-group v-model="sex" placement="row" circle>
					<u-radio activeColor="#d41c19" :customStyle="{marginRight: '30rpx'}" label="男" name="1"></u-radio>
					<u-radio activeColor="#d41c19" label="女" name="2"></u-radio>
				</u-radio-group>
			</view>

			<view class="margin_top xiahuaxian flexleft">
				<view class="ershiba xiaohei margin_right2">年龄</view>
				<input placeholder="请输入" type="number" v-model="age" />
			</view>

			<view class="margin_top xiahuaxian flexleft">
				<view class="ershiba xiaohei margin_right2">手机号（+86）</view>
				<input placeholder="请输入手机号" type="number" v-model="tel" />
			</view>
			<view class="margin_top xiahuaxian flexbetween">
				<view class="flexleft">
					<view class="ershiba xiaohei margin_right2">验证码</view>
					<input placeholder="请输入验证码" type="number" v-model="captcha" />
				</view>
				<view class="xiaohong smalltext nofonweight" style="min-width: 150rpx;" @click="sendyzm" v-show="codetext == 1">发送验证码</view>
				<view class="xiaohong smalltext nofonweight" style="min-width: 150rpx;" v-show="codetext == 2">{{second}}s后重新获取</view>
				<view class="xiaohong smalltext nofonweight" style="min-width: 150rpx;" @click="sendyzm" v-show="codetext == 3">重新发送</view>
			</view>
			<view class="margin_top flexleft">
				<view class="ershiba xiaohei margin_right2">服务城市</view>
				<input placeholder="请输入" type="text" v-model="fwaddress" />
			</view>
		</view>
		<view class="ffffff mainpadding margin_top">
			<view class="ershiba xiaohei fonweight">照片
				<!-- <text class="ershiba xiaohong fonweight">*</text> -->
			</view>
			<view class="flexleft margin_top">
				<image class="tjtp" :src="image_text" mode="" v-show="image_text" @click="uploadImg()"></image>
				<image class="tjtp" src="@/static/image/system/tjtp.png" mode="" v-show="!image_text"
					@click="uploadImg()"></image>
			</view>
		</view>
		<!-- <view class="ffffff mainpadding margin_top">
			<view class="ershiba xiaohei fonweight">资历
				<text class="ershiba xiaohong fonweight">*</text>
			</view>
			<textarea style="width: 100%;" class="margin_top textarea" placeholder="请输入..." maxlength="-1" v-model="zl"></textarea>
		</view> -->
		<view class="ffffff mainpadding margin_top">
			<view class="ershiba xiaohei fonweight">自我介绍
				<text class="ershiba xiaohong fonweight">*</text>
			</view>
			<textarea style="width: 100%;" class="margin_top textarea" placeholder="请输入..." maxlength="-1" v-model="js"></textarea>
		</view>
		<view class="ffffff mainpadding margin_top">
			<view class="ershiba xiaohei fonweight">擅长
				<text class="ershiba xiaohong fonweight">*</text>
			</view>
			<textarea style="width: 100%;" class="margin_top textarea" placeholder="请输入..." maxlength="-1" v-model="sc"></textarea>
		</view>
		<view class="mainpadding">
			<view class="bigbtn" @click="submit">加密提交</view>
		</view>
		<view class="mainpadding_top ffffff">
			<view class="sanshier textcenter xiaohuang fonweight">向公益人员致敬</view>
			<view class="mainpadding2 ffffff" style="border-radius: 0 0 20rpx 20rpx;">
				<view class="flexbetween margin_top" v-for="item in list.data" :key="item.id"
					@click="jumpdetail('/pages/zhengce/gongyiryxq?id=',item.id)">
					<view class="ffffff margin_right3 radius"
						style="padding: 15rpx;box-shadow: 5rpx 5rpx 0 #d2d3d3;border: 1rpx solid #d2d3d3;">
						<image :src="item.image_text" style="width: 150rpx;height: 210rpx;" mode=""></image>
					</view>
					<view class="" style="width: 100%;">
						<view class="titletext xiaohei fonweight margin_right2">{{item.name}}</view>
						<view class="margin_top radius"
							style="padding: 15rpx;box-shadow: 5rpx 5rpx 0 #d2d3d3;border: 1rpx solid #d2d3d3;width: 100%;height: 140rpx;">
							<view class=" xiaohei xiankuan3 ershiba">{{item.js}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				codetext: 1,
				second: 59,
				captcha:"",
				// #ifdef H5
				menutop: 80,
				// #endif
				// #ifdef MP-WEIXIN
				menutop: 0,
				// #endif	
				page: 1,
				limit: 12,
				list: {
					data: []
				},

				name: "",
				sex: "1",
				age: "",
				tel: "",
				fwaddress: "",
				image: "",
				image_text: "",
				zl: "",
				js: "",
				sc: "",
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.menutop = uni.getMenuButtonBoundingClientRect().top * 2
			// #endif
			this.init()
		},
		methods: {
			// 发送验证码
			sendyzm() {
				let _this = this;
				if (_this.tel == '') {
					httpRequest.toast("请输入手机号码!")
					return;
				}
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				httpRequest.request('/api/sms/send', 'POST', {
					mobile: this.tel,
					event: 'gyryapply',
				}, false, true, false).then(res => {
					if (res.code == 1) {
						uni.hideLoading()
						httpRequest.toast('发送成功')
						_this.codetext = 2;
						_this.second = 59;
						let timer = setInterval(function() {
							if (_this.second > 1) {
								_this.second--;
							} else {
								clearInterval(timer);
								_this.codetext = 3;
							}
						}, 1000)
					}else{
						httpRequest.toast(res.msg)
					}
				})
			},
			submit() {
				if (this.name == "") {
					httpRequest.toast("请输入姓名")
					return false
				}
				if (this.age == "") {
					httpRequest.toast("请输入年龄")
					return false
				}
				if (this.tel == "") {
					httpRequest.toast("请输入手机号")
					return false
				}
				if (this.captcha == "") {
					httpRequest.toast("请输入验证码")
					return false
				}
				if (this.fwaddress == "") {
					httpRequest.toast("请输入服务地址")
					return false
				}
				// if (this.image == "") {
				// 	httpRequest.toast("请上传照片")
				// 	return false
				// }
				// if (this.zl == "") {
				// 	httpRequest.toast("请输入资历内容")
				// 	return false
				// }
				if (this.js == "") {
					httpRequest.toast("请输入介绍内容")
					return false
				}
				if (this.sc == "") {
					httpRequest.toast("请输入擅长内容")
					return false
				}
				httpRequest.request('/api/user/gyryApply', 'GET', {
					name: this.name,
					sex: this.sex,
					age: this.age,
					tel:this.tel,
					captcha:this.captcha,
					fwaddress:this.fwaddress,
					image:this.image,
					zl:this.zl,
					js:this.js,
					sc:this.sc,
				}).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						setTimeout(()=>{
							uni.navigateBack(1)
						},1000)
					}
				})
			},
			uploadImg(value, upImgs, upImgs_text) { //上传图片
				let _this = this;
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(1, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(1, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					this.image = res.url
					this.image_text = image_item
				}).catch(err => {});
			},
			init(isPage, page) {
				let _this = this
				httpRequest.request('/api/user/gyryIndex', 'GET', {
					page: page || 1,
					limit: 12,
				}).then(res => {
					uni.stopPullDownRefresh()
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
		}
	}
</script>

<style lang="scss" scoped>
/deep/.u-radio__text{
	font-size: 28rpx !important;
}
</style>